<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看作业详情</title>
    <link rel="stylesheet" type="text/css"
          href="../bootstrap/bootstrap.4.1.0.css">
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../bootstrap/popper.12.5.min.js"></script>
    <script src="../bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
    <style type="text/css">
        /* calculator */
        #app #calculator {
            width: 220px;
            height: 205px;
            padding: 10px;
            border: 1px solid #e5e5e5;
            background: #f8f8f8;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0px 0px 10px #f2f2f2;
            -moz-box-shadow: 0px 0px 10px #f2f2f2;
            -webkit-box-shadow: 0px 0px 10px #f2f2f2;
            margin: 40px auto 0 auto;
        }

        #app #calculator #input-box {
            margin: 0;
            width: 187px;
            padding: 9px 5px;
            height: 14px;
            border: 1px solid #e5e5e5;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            background: #FFF;
            text-align: right;
            line-height: 14px;
            font-size: 12px;
            font-family: Verdana, Geneva, sans-serif;
            color: #666;
            outline: none;
            text-transform: uppercase;
        }

        #app #calculator #btn-list {
            width: 200px;
            overflow: hidden;
        }

        #app #calculator .btn-radius {
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border: 1px solid #e5e5e5;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));
            background: -moz-linear-gradient(top, #f7f7f7, #ebebeb);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7, endColorstr=#ebebeb);
            line-height: 29px;
            text-align: center;
            text-shadow: 0px 1px 1px #FFF;
            font-weight: bold;
            font-family: Verdana, Geneva, sans-serif;
            color: #666;
            float: left;
            margin-left: 11px;
            margin-top: 11px;
            font-size: 12px;
            cursor: pointer;
        }

        #app #calculator .btn-radius:active {
            background: #ffffff;
        }

        #app #calculator .clear-marginleft {
            margin-left: 0;
        }

        #app #calculator .font-14 {
            font-size: 14px;
        }

        #app #calculator .color-red {
            color: #ff5050
        }

        #app #calculator .color-blue {
            color: #00b4ff
        }

        #app #calculator .btn-30 {
            width: 29px;
            height: 29px;
        }

        #app #calculator .btn-70 {
            width: 70px;
            height: 29px;
        }
    </style>
</head>

<body>
<div id="app" class="container">
    试卷ID：<input type="text" v-model="paperId">
    学生ID：<input type="text" v-model="studentId">
    <input type="button" @click="testa()" value="测试阅卷">
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th style="width: 7%">题号</th>
                <th style="width: 80%">考生答案</th>
                <th>得分</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td>选择判断题部分</td>
                <td>{{replySheet[0].replyScore}}</td>
            </tr>
            <tr v-for="(value,index) in replySheet">
                <td v-if="index !== '0'">
                    <b>{{value.replyQuestionId}}</b>
                    <b v-if="value.replySonId != '0'">.{{value.replySonId}}</b>
                </td>
                <td v-if="index !== '0'">
                    {{value.replyAnswer}}
                </td>
                <td v-if="index !== '0'">
                    <div id="calculator" style="margin-left: 0; margin-top: 0;">
                        <!--显示框-->
                        <input type="text" v-model="getPoint[index]" id="input-box" style="float: left;">
                        <btn-list>
                            <div @click="inputValue('1',index)" class=" btn-30 btn-radius clear-marginleft">1</div>
                            <div @click="inputValue('2',index)" class=" btn-30 btn-radius">2</div>
                            <div @click="inputValue('3',index)" class=" btn-30 btn-radius">3</div>
                            <div @click="backValue(index)" class=" btn-70 btn-radius color-blue font-14">→</div>
                            <div @click="inputValue('4',index)" class=" btn-30 btn-radius clear-marginleft">4</div>
                            <div @click="inputValue('5',index)" class=" btn-30 btn-radius">5</div>
                            <div @click="inputValue('6',index)" class=" btn-30 btn-radius">6</div>
                            <div @click="clearValue(index)" class=" btn-70 btn-radius color-red font-14">清空</div>
                            <div @click="inputValue('7',index)" class=" btn-30 btn-radius clear-marginleft">7</div>
                            <div @click="inputValue('8',index)" class=" btn-30 btn-radius">8</div>
                            <div @click="inputValue('9',index)" class=" btn-30 btn-radius">9</div>
                            <div class="btn-70 btn-radius color-red font-14 " style="visibility: hidden"></div>
                            <div @click="inputValue('0',index)" class=" btn-70 btn-radius clear-marginleft">0</div>
                            <div @click="inputValue('.5',index)" class=" btn-30 btn-radius">.5</div>
                            <div @click="calValue(value.replyId,index)" class="btn-70 btn-radius color-red font-14">确认
                            </div>
                        </btn-list>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">退出阅卷</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="flushSelectList()">下一张
    </button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            paperId: '',
            studentId: '',
            getPoint: [
                '0', '0', '0', '0', '0',
                '0', '0', '0', '0', '0',
                '0', '0', '0', '0', '0',
                '0', '0', '0', '0', '0',
                '0', '0', '0', '0', '0'],
            replySheet: [{
                "replyScore": 0,
                "replyQuestionId": '',
                "replySonId": '',
                "replyAnswer": '',
            }],
        },
        methods: {
            testa: function () {
                console.log(this.paperId + "-----" + this.studentId)
                axios.get('../mark/startMark/' + this.paperId + '/' + this.studentId)
                    .then(function (response) {
                        console.info(response);
                        app.replySheet = response.data;
                    }).catch(function (error) {
                    console.log(error);
                })
            },
            inputValue(param, index) {
                var str = '' + this.getPoint[index]; //输入内容时,将输入框内容转为字符串类型
                //parseInt(str.split('').reverse().join('')))是获取输入框内最后一串数字,再反转回来 ,num为输入框内最后一串数字
                console.log("str" + str);
                var num = ('' + (str.split('').reverse().join(''))).split('').reverse().join('');

                console.log("num" + num + ",index" + index);
                var nlen = num.length;
                if ((num !== '0' && param !== '.5') || (param === '.5' && num.indexOf(".5") === -1)) {   //输入框内最后一串数字不为0时拼接字符串
                    this.getPoint[index] += param;   //拼接输入内容
                } else {
                    if (param === '.5') {      //若num中已有小数点,输入内容为小数点,视为无效
                        return;
                    } else {    //判断输入框内最后一个字符不为运算符
                        this.getPoint[index] = str.substring(0, str.length - nlen) + param;  //输入框内最后一串数字为0时,删除0拼接
                    }
                }
                this.$forceUpdate();
            },
            clearValue(index) {      //清空输入框内容
                this.getPoint[index] = '0';
                this.$forceUpdate();
            },
            backValue(index) {              //删除键,删除单个字符
                var str = this.getPoint[index];
                if (str.length === 1) {
                    this.getPoint[index] = "0";
                } else {
                    this.getPoint[index] = str.slice(0, str.length - 1);
                }
                this.$forceUpdate();
            },
            calValue: function (value, index) {
                var replySheet = {
                    replyId: value,
                    replyScore: this.getPoint[index]
                };
                axios.put("../mark/markOne", replySheet)
                    .then(result => {
                        console.log(result);
                        app.getPoint[index] = '0';
                        alert("分数保存成功！");
                    }).catch(error => {
                    console.log(error);
                });
                console.log(this.getPoint[index]);
                this.$forceUpdate();
            },
        }
    });

</script>
</body>
</html>